<template>
    <div class="product-detail">
        <s-header :name="'商品详情'"></s-header>
        <div class="detail-content">
            <div class="detail-swipe-wrap">
                <van-swipe class="my-swipe" indicator-color="#1baeae">
                    <van-swipe-item v-for="item in 3">
                        <img v-lazy="prefix(detail.product.pic)" alt="">
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div class="product-info">
                <div class="product-title">
                    {{ detail.product.name }}
                </div>
                <div class="product-desc">免邮费 顺丰快递 {{detail.product.subTitle}}</div>
                <div class="product-price">
                    <span>¥{{ detail.product.price }}</span>
                    <!-- <span>库存203</span> -->
                </div>
            </div>
            <div class="product-intro">
                <ul>
                    <li>概述</li>
                    <li>参数</li>
                    <li>安装服务</li>
                    <li>常见问题</li>
                </ul>
                <van-divider dashed>商品详情</van-divider>
                <div class="product-content" v-html="detail.product.detailHtml" v-if="detail.product.detailHtml"></div>
                <div class="product-content" v-else>
                    <p>商品详情加载中...</p>
                    <!--                    <img v-lazy="detail.brand.bigPic" alt="">-->
                </div>
            </div>
        </div>
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服"/>
            <van-goods-action-icon icon="cart-o" :info="!count ? '' : count" @click="goTo()" text="购物车"/>
            <van-goods-action-button type="warning" @click="addCart" text="加入购物车"/>
            <van-goods-action-button type="danger" @click="goToCart" text="立即购买"/>
        </van-goods-action>
    </div>
</template>

<script>
    import {getDetail} from '../../api/product'
    import {addCartItem} from '../../api/cart'
    import sHeader from '../../components/SimpleHeader'
    import {Toast} from 'vant'
    import {generateOrder} from "../../api/order";
    import store from "../../store";
    import {insertHistory} from '../../api/history'

    export default {
        name: "productDetail",
        data() {
            return {
                detail: {
                    brand: {},
                    couponList: [],
                    product: {},
                    productAttributeList: [],
                    productAttributeValueList: [],
                    productFullReductionList: [],
                    productLadderList: [],
                    skuStockList: [],
                }
            }
        },
        components: {
            sHeader
        },
        async mounted() {
            const {id} = this.$route.params
            getDetail(id).then(res => {
                this.detail.brand = res.data.brand
                this.detail.couponList = res.data.couponList
                this.detail.product = res.data.product
                this.detail.productAttributeList = res.data.productAttributeList
                this.detail.productAttributeValueList = res.data.productAttributeValueList
                this.detail.productFullReductionList = res.data.productFullReductionList
                this.detail.productLadderList = res.data.productLadderList
                this.detail.skuStockList = res.data.skuStockList
                this.addHistory(this.detail.product);
            })
            console.log(this.detail.skuStockList);
        },
        methods: {
            goBack() {
                this.$router.go(-1)
            },
            goTo() {
                this.$router.push({path: '/cart'})
            },
            async addCart() {
                const data =
                    {
                        "createDate": new Date(),
                        "modifyDate": new Date(),
                        "price": this.detail.product.price,
                        "productBrand": this.detail.brand.name,
                        "productCategoryId": this.detail.product.productCategoryId,
                        "productId": this.detail.product.id,
                        "productName": this.detail.product.name,
                        "productPic": this.detail.product.pic,
                        "productSkuCode": this.detail.skuStockList[0].skuCode,
                        "productSkuId": this.detail.skuStockList[0].id,
                        "productSn": this.detail.product.productSn,
                        "productSubTitle": this.detail.product.subTitle,
                        "quantity": 1
                    }
                addCartItem(data).then(res => {
                    if (res.data === 1) {
                        Toast.success('添加成功')
                        this.$store.dispatch('GetInfo');
                    }
                })
            },
            async goToCart() {
                this.addCart();
                setTimeout(() => {
                    this.$router.push({ path: '/cart' })
                }, 3000)
            },
            addHistory(product){
                if (store.getters.token){
                    const data = {
                        "productId": product.id,
                        "productName": product.name,
                        "productPic": product.pic,
                        "productPrice": product.price,
                        "productSubTitle": product.subTitle
                    }
                    insertHistory(data).then(res => {
                        console.log(res.data);
                    })
                }else {
                    return;
                }
            }
        },
        computed: {
            count() {
                return this.$store.getters.count
            }
        }
    }
</script>


<style lang="less">
    @import '../../common/style/mixin';

    .product-detail {
        .detail-header {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10000;
            .fj();
            .wh(100%, 44px);
            line-height: 44px;
            padding: 0 10px;
            .boxSizing();
            color: #252525;
            background: #fff;
            border-bottom: 1px solid #dcdcdc;

            .product-name {
                font-size: 14px;
            }
        }

        .detail-content {
            margin-top: 44px;

            .detail-swipe-wrap {
                .my-swipe .van-swipe-item {
                    img {
                        width: 100%;
                        // height: 300px;
                    }
                }
            }

            .product-info {
                padding: 0 10px;

                .product-title {
                    font-size: 18px;
                    text-align: left;
                    color: #333;
                }

                .product-desc {
                    font-size: 14px;
                    text-align: left;
                    color: #999;
                    padding: 5px 0;
                }

                .product-price {
                    .fj();

                    span:nth-child(1) {
                        color: #F63515;
                        font-size: 22px;
                    }

                    span:nth-child(2) {
                        color: #999;
                        font-size: 16px;
                    }
                }
            }

            .product-intro {
                width: 100%;

                ul {
                    .fj();
                    width: 100%;
                    margin: 10px 0;

                    li {
                        flex: 1;
                        padding: 5px 0;
                        text-align: center;
                        font-size: 15px;
                        border-right: 1px solid #999;
                        box-sizing: border-box;

                        &:last-child {
                            border-right: none;
                        }
                    }
                }

                .product-content {
                    padding: 0 20px;

                    img {
                        width: 100%;
                    }
                }
            }
        }

        .van-goods-action-button--warning {
            background: linear-gradient(to right, #6bd8d8, @primary)
        }

        .van-goods-action-button--danger {
            background: linear-gradient(to right, #0dc3c3, #098888)
        }
    }
</style>
